import Vue from "vue";
import VueRouter from "vue-router";
import About from "../views/About";
import Home from "../views/Home";
import Message from "../views/About/Message";
import News from "../views/About/News";
import Detail from "../views/About/Message/Detail";
// 使用插件
Vue.use(VueRouter);
export default new VueRouter({
  // 模式设置有hash和history
  /* hash:
      地址栏带#
      兼容性好，ie8
      原理：(操作BOM)
        地址切换：location.hash
        事件： hashChange
  history :
      地址栏不带#
      兼容新不好，ie 10
      原理:
        地址栏切换：history.pushState()
        事件：history.change()
      
        // 注意之前引入的样式，路径的问题
        
   */
  mode:'history',
  // 配置路由
  routes: [
    {
      path: "/about",
      component: About,
      children: [
        {
          path: "/about/news",
          component: News,
        },
        {
          path: "/about/message",
          component: Message,
          children: [
            { name:'Detail',
              path: "/about/message/detail/:id", //匹配多个路径，必须传参
              component: Detail,
            },
            {
              path: "",
              redirect: "detail/1",//重定向要存在的
            },
          ],
        },
        {
          path: "",
          redirect: "message",
        },
      ],
    },
    {
      path: "/home",
      component: Home,
    },
    {
      // 除了上面的路由匹配不了都会到这个页面来
      path: "*",
      redirect: "/home",
    },
  ],
});
